<!-- datepicker -->
<link rel="stylesheet" href="template/js/lib/bootstrap-datepicker/css/datepicker.css">
<div class="container">
    <div class="row-fluid">
        <div class="span12">
            <div class="w-box">
                <div class="w-box-header">
                    <h4>Оборот</h4>
                </div>
                <div class="w-box-content cnt_b">
                    <div class="row-fluid">
                        <div class="span5">
                            <div class="span5">
                                <label>Дата с</label>

                                <div class="input-append date" id="dpStart" data-date-format="dd.mm.yyyy">
                                    <input class="span6" size="16" value="" readonly type="text">
                                    <span class="add-on"><i class="icon-calendar"></i></span>
                                </div>
                            </div>
                            <div class="span5">
                                <label>Дата по</label>

                                <div class="input-append date" id="dpEnd" data-date-format="dd.mm.yyyy">
                                    <input class="span6" size="16" value="" readonly type="text">
                                    <span class="add-on"><i class="icon-calendar"></i></span>
                                </div>
                            </div>
                        </div>
                        <div class="span4">
                            <div id="chart_pie" class="chart_a"></div>
                        </div>
                    </div>
                    <br/>
                </div>
            </div>
        </div>

    </div>
</div>
<div class="footer_space"></div>
</div>
<?php echo $_GET['page'];?>
<!-- flot charts -->
<script src="template/js/lib/flot-charts/jquery.flot.js"></script>
<script src="template/js/lib/flot-charts/jquery.flot.resize.js"></script>
<script src="template/js/lib/flot-charts/jquery.flot.pie.js"></script>
<script src="template/js/lib/flot-charts/jquery.flot.orderBars.js"></script>
<script src="template/js/lib/flot-charts/jquery.flot.tooltip.js"></script>
<script src="template/js/lib/flot-charts/jquery.flot.time.js"></script>
<script src="template/js/lib/flot-charts/jquery.flot.stack.js"></script>
<script src="template/js/lib/flot-charts/jquery.flot.threshold.js"></script>
<!-- datatables bootstrap integration -->
<script src="template/js/lib/date/date.format.js"></script>

<script type="text/javascript">
    function start_find(startDate, endDate, type) {
        $.post("ajax/charts/charts.php", { startDate: startDate, endDate: endDate, type: '<?php echo $_GET['page'];?>'})
            .done(function (data) {
                data = eval("(" + data + ")");
                //console.log(data);
                if ($('#chart_pie').length) {
                    var container = $('#chart_pie');
                    $.plot(container, data,
                        {
                            series: {
                                pie: {
                                    show: true,
                                    //radius: 3/4,
                                    //innerRadius: 0.5,
                                    highlight: {
                                        opacity: 0.2
                                    }
                                }
                            },
                            grid: {
                                hoverable: true,
                                clickable: true
                            },
                            tooltip: true,
                            tooltipOpts: {
                                content: "%s - %p.2%",
                                shifts: {
                                    x: 20,
                                    y: 0
                                },
                                defaultTheme: false
                            }
                        }
                    );
                }
            });
    }
    $(document).ready(function() {
        if (($('#dpStart').length) && ($('#dpEnd').length)) {

            var d1 = new Date();
            d1.setDate(d1.getDate() - 7);
            d1 = dateFormat(d1, 'dd.mm.yyyy');
            $('#dpStart').data('date', d1);
            $('#dpStart input').val(d1);
            var startDate=d1;


            var d2 = new Date();
            d2.setDate(d2.getDate());
            d2 = dateFormat(d2, 'dd.mm.yyyy');
            $('#dpEnd').data('date', d2);
            $('#dpEnd input').val(d2);
            var endDate=d2;
            start_find(startDate, endDate);

            $('#dpStart').datepicker().on('changeDate', function (ev) {
                var dateText = $(this).data('date'),
                    endDateTextBox = $('#dpEnd input');
                if (endDateTextBox.val() != '') {
                    var testStartDate = new Date(dateText),
                        testEndDate = new Date(endDateTextBox.val());
                    if (testStartDate > testEndDate) {
                        endDateTextBox.val(dateText);
                    }
                } else {
                    endDateTextBox.text(dateText);
                }
                ;
                $('#dpEnd').datepicker('setStartDate', dateText);
                $('#dpStart').datepicker('hide');
                var startDate = dateText;
                var endDate = endDateTextBox.val();
                start_find(startDate, endDate);
            });
            $('#dpEnd').datepicker().on('changeDate', function (ev) {
                var dateText = $(this).data('date'),
                    startDateTextBox = $('#dpStart input');
                if (startDateTextBox.val() != '') {
                    var testStartDate = new Date(startDateTextBox.val()),
                        testEndDate = new Date(dateText);
                    if (testStartDate > testEndDate) {
                        startDateTextBox.text(dateText);
                    }
                } else {
                    startDateTextBox.val(dateText);
                }
                ;
                $('#dpStart').datepicker('setEndDate', dateText);
                $('#dpEnd').datepicker('hide');
                var startDate = startDateTextBox.val();
                var endDate = dateText;
                start_find(startDate, endDate);
            });
        }

        $("select#date_select").change(function() {
            var startDate = $('#dpStart input').val();
            var endDate = $('#dpEnd input').val();
            var tip_date = $("select#date_select").val();
            //start_find(startDate, endDate);

        });
    });
</script>